<!-- 广告位 -->
<template>
  <div
    class="container mx-auto px-4 py-6 mt-12 grid grid-cols-1 md:grid-cols-3 gap-6"
  >
    <div
      v-for="(ad, index) in advertisements"
      :key="index"
      class="relative overflow-hidden rounded-lg shadow-sm"
    >
      <img :src="ad.image" :alt="ad.title" class="w-full h-48 object-cover" />
      <div
        class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6"
      >
        <div>
          <h3 class="text-xl font-bold text-white">{{ ad.title }}</h3>
          <p class="mt-2 text-sm text-white/80">{{ ad.description }}</p>
          <button
            class="mt-4 px-4 py-2 bg-orange-500 text-white !rounded-button whitespace-nowrap"
          >
            查看详情
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import loadLocalJson from "@/https/local/localJson";
//广告位的数据
const advertisements = [
  {
    id: 1,
    title: "神溪鞋业",
    description: "专注品质，追求卓越",
    image:
      "https://ai-public.mastergo.com/ai/img_res/46d5dbe72b08e8a45be8ecd223cf6f5d.jpg",
  },
  {
    id: 2,
    title: "包牛牛",
    description: "品质优选，诚信经营",
    image:
      "https://ai-public.mastergo.com/ai/img_res/97505b410a4f42b9aa396894e0157be4.jpg",
  },
  {
    id: 3,
    title: "二童网",
    description: "童鞋专家，呵护成长",
    image:
      "https://ai-public.mastergo.com/ai/img_res/5e4299e51c23446f44200acc6a226271.jpg",
  },
];
</script>
<style lang="less" scoped></style>
